<template>
    <div class="wh-full">
      <el-row class="ctx">
        <el-col class="ctx" :span="15">
          <swiper :bannerList="bannerList"></swiper>
        </el-col>
        <el-col class="ctx" :span="9">
          <div class="logo ml7c"><img src="../../assets/img/bzxt_login_logo.png" alt="车辆避灾运营平台"></div>
          <div class="loginGroup ml7c">
            <p>用户登录</p>
            <div class="login login-wrap mt50">
              <el-form :model="form" :rules="rules" ref="form" label-width="0px">
                  <el-form-item prop="username">
                      <el-input v-model="form.username" placeholder="用户名"></el-input>
                  </el-form-item>
                  <el-form-item prop="password" class="mt1c">
                      <el-input type="password" placeholder="密码" v-model="form.password"
                                @keyup.enter.native="submitForm('ruleForm')"></el-input>
                  </el-form-item>
                  <el-form-item prop="captcha" class="mt1c" v-if="needcaptcha===true">
                      <el-input type="captcha" style="width:160px" placeholder="验证码" v-model="form.captcha" ></el-input>
                      <img :src="img" class="code" @click="getCaptcha()">
                  </el-form-item>
                  <div class="loginBtn mt7c">
                    <div class="tlc btnSty" @click="submitForm()">登录</div>
                  </div>
              </el-form>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import swiper from '../../components/swiper'
export default {
  data: function () {
    const userNameReg = /^[a-zA-Z0-9_-]{3,16}$/
    function validateLoginName (rule, value, callback) {
      if (!value || userNameReg.test(value)) {
        callback()
      } else callback(new Error('用户名格式错误'))
    }
    return {
      formName: 'form',
      form: {
        username: '',
        password: '',
        captcha: ''
      },
      rolesForm: {
        siteCode: 'dearcc',
        userID: '',
        token: ''
      },
      needcaptcha: false,
      uuid: '',
      errNum: 1,
      img: '',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change,blur' },
          { validator: validateLoginName, trigger: 'change,blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change,blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'change,blur' }
        ]
      },
      bannerList: [require("../../assets/img/bzxt_login_bg1.png"),require("../../assets/img/bzxt_login_bg1.png"),require("../../assets/img/bzxt_login_bg1.png")]
    }
  },
  components: {
    swiper
  },
  methods: {
    submitForm () {
      const self = this
      let formName = this.$data.formName
      self.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            ...this.$store.state.siteParam,
            userID: '',
            token: ''
          }
          if (this.form.password.indexOf(' ') >= 0) {
            this.$message({ type: 'warning', message: '登录失败,用户名或密码错误!' })
          } 
          if (this.form.username == 'weizq' && this.form.password == '11111111'){ 
            self.$router.replace('/');
            // this.$store.commit('setUserInfo', {user})userInfo.user.name
            this.$store.commit('setUserInfo', {userInfo:{user:{name:'weizq'}}})
          }else{
            this.$message({ type: 'warning', message: '登录失败,用户名或密码错误!' })
          }
          // else {
          //   ssoService.login({
          //     username: this.form.username,
          //     password: this.form.password,
          //     captcha: this.form.captcha,
          //     uuid: this.$data.uuid
          //   }).then((data) => {
          //     params.userID = data.userId
          //     params.token = data.token
          //     this.$store.commit('setUserInfo', data)
          //     ssoService.UserRoles(params).then((result) => {
          //       this.$setRoles(result)
          //       self.$router.replace('/')

          //          let arr = Object.keys(result)
          //          if (arr.length === 0) {
          //              self.$message.error('您没有权限，请联系管理员')
          //              self.$router.replace('Login')
          //          } else {
          //              self.$router.replace('/')
          //          }
          //     })
          //   }).catch((err) => {
          //     this.errNum++
          //     if (this.errNum > 3 || err.code === 612) {
          //       this.$data.needcaptcha = true
          //       this.getCaptcha()
          //     }
          //     this.$message({
          //       showClose: true,
          //       message: err.message,
          //       type: 'warning'
          //     })
          //   })
          // }
        } else {
          return false
        }
      })
    },
    getCaptcha () {
      let needcaptcha = this.$data.needcaptcha
      this.$data.uuid = Math.random()
      if (needcaptcha) {
        this.$data.img = ssoService.getCaptcha(this.$data.uuid)
      }
    }

  }
}
</script>

<style scoped>
  .ctx{height: 100%;}
  .logo{ width: 30%; height: 10%; margin-top: 5%; }
  .loginGroup{color: #3C3A6F;margin-top: 18%;}
  .loginGroup p{font-size: 40px;font-weight: bold;}
  .loginGroup .login{padding-right: 30%;}
  .loginGroup .code{  width: 90px;height:38px;position: absolute;margin-left: 5px;cursor: pointer;margin-top: 25px;}
  .loginGroup .loginBtn{width: 160px;height: 60px;line-height: 60px;background-image: linear-gradient(90deg, #FCD57E 0%, #F7AB48 100%);border-radius: 8px;}
  .loginGroup .loginBtn:hover{background-image: linear-gradient(90deg, #F7AB48 100%, #F7AB48 100%);;}
  .btnSty{color: #3C3A6F;font-weight: bold;font-size: 24px;cursor: pointer;}
</style>
